<template>
  <div class="page-wrapper">
    <el-card>
      <el-tabs>
        <!-- 第一标签 -->
        <el-tab-pane label="登录信息">
          <el-form>
            <el-form-item label="用户名">
              <el-input v-model="formData.username" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formData.password" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="submit">
                更新
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 第二标签 -->
        <el-tab-pane label="个人详情">
          <!-- 个人隐私填写 -->
          <UserInfo />
        </el-tab-pane>

        <!-- 第三标签 -->
        <el-tab-pane label="岗位信息">
          <!-- 岗位相关数据 -->
          <JobInfo />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import UserInfo from './components/user-info.vue'
import JobInfo from './components/job-info.vue'
import { getUserDetailById } from '@/api/user'
import { saveUserDetailById } from '@/api/employee'
export default {
  components: {
    UserInfo,
    JobInfo
  },
  data() {
    return {
      // 当前 url 上带上的 id
      userId: this.$route.params.id,
      // 表单绑定的数据
      formData: {
        username: '',
        password: ''
      },
      // 拿到的总数据
      data: {}
    }
  },
  async created() {
    // 这里不是修改自己, 是你点击的那个员工
    this.data = await getUserDetailById(this.userId)
    this.formData.username = this.data.username
  },
  methods: {
    async submit() {
      // 拿到的旧数据是 data
      // 用户填写的新数据是 formData (不一定有填)
      // 真正要保存修改发出去的数据, 其实是旧数据 + 用户填写过的新数据
      this.data.username = this.formData.username || this.data.username
      this.data.password = this.formData.password || this.data.password

      console.log('修改的数据', this.data)
      await saveUserDetailById(this.data)
      this.$message.success('更新成功')
    },
    reset() {
      this.formData.username = this.data.username
      this.formData.password = ''
    }
  }
}
</script>

<style>

</style>
